<template>
    <div class="mod-config">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="参数名" clearable @input="getDataList"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" plain @click="drawTheModel">绘制模型</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;">
            <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                prop="key"
                header-align="center"
                align="center"
                label="流程Key">
            </el-table-column>
            <el-table-column
                prop="name"
                header-align="center"
                align="center"
                label="流程名称">
            </el-table-column>
            <el-table-column
                prop="metaInfo"
                header-align="center"
                align="center"
                label="流程描述">
                <template slot-scope="scope">
                    {{ JSON.parse(scope.row.metaInfo).description }}
                </template>
            </el-table-column>
            <el-table-column
                prop="version"
                header-align="center"
                align="center"
                label="版本">
            </el-table-column>
            <el-table-column
                prop="revision"
                header-align="center"
                align="center"
                label="修改次数">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.revision>10?'danger':scope.row.revision>5?'warning':''">
                        {{ scope.row.revision }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="450" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" plain icon="el-icon-edit" size="small" @click="toIframe(scope.row)">
                        流程编辑
                    </el-button>
                    <el-button type="success" plain size="small" icon="el-icon-check"
                               @click="release(scope.row.brandId)">发布
                    </el-button>
                    <el-button type="primary" plain size="small" icon="el-icon-delete"
                               @click="deleteByKey(scope.row.brandId)">删除
                    </el-button>
                    <el-button type="danger" plain size="small" icon="el-icon-delete"
                               @click="mandatoryDelete(scope.row.brandId)">强制删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script>

export default {
    data () {
        return {
            dataForm: {
                key: ''
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false
        }
    },
    components: {},
    activated () {
        this.getDataList()
    },
    methods: {
        // 获取数据列表
        getDataList () {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/activity/models'),
                method: 'get',
                params: this.$http.adornParams({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'key': this.dataForm.key
                })
            }).then(({data}) => {
                if (data && data.status === '000') {
                    this.dataList = data.data.rows.list
                    this.totalPage = data.data.rows.totalRows
                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        },
        // 每页数
        sizeChangeHandle (val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle (val) {
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle (val) {
            this.dataListSelections = val
        },
        // 新增 / 修改
        editor (id) {
            this.addOrUpdateVisible = true
        },
        release () {
        },
        deleteByKey () {
        },
        mandatoryDelete () {
        },
        //绘制模型
        drawTheModel: function () {
            window.open(this.$http.adornUrl('/activity/models/newModel'))
        },
        toIframe: function (row) {
            this.$router.replace({
                name: 'layouts-IframePageView',
                params: {url: 'http://localhost:8082/activity/editor?modelId='+row.id}
                //getway
                //params: {url: this.$http.adornUrl('/activity/editor?modelId='+row.id)}
            })
        }
    }
}
</script>

